<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="结算" navbarType='3'></wlk-navbar>
        <view class="create-content relative">
          <view class="bgw mt30 br08 pd30">
            <view class="wlkflex">
              <uni-icons size="25" type="shop"></uni-icons>
              <view class="system_name bold">{{ initMain.system_name }}</view>
            </view>
            <view class="goods-list mt20">
              <view v-for="(item,index) in goods" class="wlkflex justify-between align-start item mt20">
                <view class="left">
                  <image :src="item.images[0]" class="br08" mode="aspectFill"></image>
                </view>
                        <view class="right wlkflex align-content-between wrap">
                            <view class="title u-line-1 wd100">{{item.title}}</view>
                            <view class="wd100 money wlkflex justify-between align-end">
                                <view class="money-left">
                                    <view class="price mt10" v-if="userInfo.card && userInfo.card.status == 'normal'"><text class="mr05">¥</text>{{item.vip_price}} <text class="ml10">会员价</text></view>
                                    <view class="price mt10" v-else><text class="mr05">¥</text>{{item.price}}</view>
                                </view>
                                <view class="money-right col9">
                                x{{item.quantity}}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="mt30 bgw br08 cell-list">
                <u-cell-group
                    :border="false"
                >
                    <u-cell
                            :border="false"
                    >
                        <text slot="title" class="cell-title">商品总额</text>
                        <view
                                slot="value"
                                class="u-slot-value"
                        >
                            <text class="mr05">¥</text>
                            {{goodsPrice}}</view>
                    </u-cell>
                  <u-cell
                      :border="false"
                      isLink
                      @click="choseCoupon"
                  >
                    <text slot="title" class="cell-title">优惠券</text>
                    <text slot="value">
                      <block v-if="$u.test.isEmpty(normalCoupon)">
                        <text class="total-coupon">暂无可用</text>
                      </block>
                      <block v-else>
                        <text
                            v-if="couponIndex===null"
                            class="u-slot-value total-coupon"
                        >{{ normalCoupon.length }}张可用
                        </text>
                        <text v-else class="coupon-price">
                          -￥{{ couponPrice }}
                        </text>
                      </block>
                    </text>
                  </u-cell>
                </u-cell-group>
            </view>
            <view class="pd30 people bgw mt30 br08">
                <u--form
                        labelPosition="left"
                        :model="form"
                        :rules="rules"
                        ref="uForm"
                        labelWidth="100"
                        :labelStyle="{
                        fontSize: '14px'
                        }"
                >
                    <u-form-item
                            label="联系人"
                            prop="realname"
                            borderBottom
                            ref="item"
                    >
                        <u--input
                                :customStyle="{
                                    padding:'13rpx 0',
                                }"
                                placeholderStyle="font-size:14px"
                                fontSize="14px"
                                v-model="form.realname"
                                placeholder="请输入联系人姓名"
                                border="none"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                            label="手机号"
                            prop="mobile"
                            borderBottom
                            ref="item"
                    >
                        <u--input
                                :customStyle="{
                                padding:'13rpx 0'
                            }"
                                placeholderStyle="font-size:14px"
                                fontSize="14px"
                                v-model="form.mobile"
                                placeholder="请输入联系人手机号"
                                border="none"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                            label="订单备注"
                            border="none"
                            ref="item"
                    >
                        <u--textarea :customStyle="{backgroundColor:'#F9F9F9'}" border="none" v-model="form.remark" ></u--textarea>
                    </u-form-item>
                </u--form>
            </view>
        </view>
        <view class="foot-fixed wd100 pd30 bgw wlkflex justify-between shadow">
            <view  class="ml20">支付金额:<text class="mr05 ml05"></text> <text class="unit">￥</text> <text class="total-price">{{price}}</text> </view>

            <view class="buy-btn">
                    <u-button :customStyle="{
                                height:'70rpx',
                                fontSize:'14px',
                                width:'180rpx'
                            }" :color="themeColor" size="normal" shape="circle" text="提交订单" @click="submit"></u-button>
            </view>
        </view>
        <u-popup :show="showCoupon" @close="showCoupon=false" round="20">
              <view class="coupon-list">
                  <u-sticky bgColor="#fff">
                      <view class="content-tabs">
                          <u-tabs
                                  :scrollable="false"
                                  :activeStyle="{
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        color:themeColor,
                        fontWeight: 'bold',
                        transform: 'scale(1.05)'
                    }"
                                  :itemStyle="{
                         height: '40px',
                         alignItems:'flex-start',
                         padding:'0 30rpx',
                    }"
                                  :inactiveStyle="{
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        transform: 'scale(1)'
                    }"
                                  :list="tabs"
                                  lineWidth="35"
                                  lineHeight="2"
                                  :lineColor="themeColor"
                                  :current="current"
                                  @change="changeTab"
                          ></u-tabs>
                      </view>
                  </u-sticky>
                  <scroll-view scroll-y scroll-with-animation class="coupon-item" :scroll-top="scrollTop">
                      <block v-if="$u.test.isEmpty(coupons)">
                          <view class="not-data">
                              <u-empty
                                      :icon="uEmpty.search"
                                      text="暂无优惠券"
                              >
                              </u-empty>
                          </view>
                      </block>
                      <block v-else>
                          <radio-group>
                              <view @click="radioChange(index)" class="item relative mb20 wd100 overHidden" v-for="(item, index) in coupons" :key="item.id">
                                  <view class="top"></view>
                                  <view class="bottom"></view>
                                  <view class="wlkflex justify-between item-content">
                                      <view class="left wlkflex pd20 wrap relative">
                                          <view class="money center wd100" v-if="item.coupon_info.sale_type=='deduct'">
                                              <view class="bold">￥{{item.coupon_info.deduct}}</view>
                                              <view class="enough mt05" v-if="item.coupon_info.enough>0">满{{item.coupon_info.enough}}元可用</view>
                                              <view class="enough mt05" v-else>无门槛</view>
                                          </view>
                                          <view v-else class="money center wd100">
                                              <view class="bold">{{item.coupon_info.discount}}折</view>
                                              <view class="enough mt05" v-if="item.coupon_info.enough>0">满{{item.coupon_info.enough}}元可用</view>
                                              <view class="enough mt05" v-else>无门槛</view>
                                          </view>
                                          <view class="tag" v-if="index==0 && current==0">
                                              推荐
                                          </view>
                                      </view>
                                      <view class="right wlkflex justify-between">
                                          <view class="info wlkflex wrap">
                                              <view class="wd100 name bold">{{item.coupon_info.name}}</view>
                                              <block v-if="item.status==0">
                                                  <view class="out" v-if="item.nowOut">
                                                      今日到期
                                                  </view>
                                                  <view class="col9 endtime" v-else>
                                                      {{$u.timeFormat(item.endtime, 'yyyy-mm-dd')}} 到期
                                                  </view>
                                              </block>
                                              <block v-if="item.status==1">
                                                  <view class="col9 endtime">
                                                      {{$u.timeFormat(item.usedtime, 'yyyy-mm-dd')}} 使用
                                                  </view>
                                              </block>
                                              <block v-if="item.status==-1">
                                                  <view class="col9 endtime">
                                                      {{$u.timeFormat(item.endtime, 'yyyy-mm-dd')}} 到期
                                                  </view>
                                              </block>
                                          </view>
                                          <view class="btn wlkflex justify-end">
                                              <radio :disabled="current==1" :value="'v'+item.id" :color="themeColor" :checked="index === couponIndex" />
                                          </view>
                                      </view>
                                  </view>
                                  <view class="desc col9"><text>适用品类：</text><text>{{item.coupon_info.apply_text}}</text></view>
                              </view>
                          </radio-group>
                      </block>
                  </scroll-view>
                  <view class="cancel-btn">
                      <u-button
                              :customStyle="{
                                fontSize:'14px'
                            }" :color="themeColor" size="large" shape="circle" text="不使用" @click="cancelCoupon"></u-button>
                  </view>
              </view>
        </u-popup>
	</view>
</template>

<script>
    var _self;
    import { mapGetters} from 'vuex';
    import { cal } from '@/wlkutils/cal'
    import { toUrl, toWork } from '@/wlkutils/tools';
	export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty','isLogin','initMain','userInfo']),
        },
		data() {
			return {
                tabs:[
                    {
                        name: '可用',
                    }, {
                        name: '不可用',
                    }
                ],
                goods:[],
                coupons:[],
                normalCoupon:[],
                hiddenCoupon:[],
                loading:true,
                form:{
                    realname:'',
                    mobile:'',
                    remark:''
                },
                rules: {
                  'realname': {
                    type: 'string',
                    required: true,
                    message: '请填写联系人姓名',
                    trigger: ['blur', 'change']
                  },
                  'mobile': [
                    {
                      required: true,
                      message: '请输入手机号',
                      trigger: ['change', 'blur'],
                    },
                    {
                      validator: (rule, value, callback) => {
                        return uni.$u.test.mobile(value);
                      },
                      message: '手机号码不正确',
                      trigger: ['change', 'blur'],
                    }
                  ]

                },
                goodsPrice:'',
                price:'',
                showCoupon:false,
                couponIndex:null,
                couponPrice:0,
                scrollTop:0,
                current:0
			};
		},
        watch:{
            isLogin(val){
                this.getData();
            }
        },
        onLoad(options) {
            _self = this;
            this.getData();
        },
        onShow() {

        },
        onReady() {
          this.$refs.uForm.setRules(this.rules);
        },
        onPageScroll(e){
            _self.scrollTop = e.scrollTop;
        },
        methods: {
            getData(){
                let json = JSON.stringify(this.$Route.query);
                uni.$u.http.post('order/before', {json:json}).then(res => {
                    _self.goods = res.data.goods;
                    _self.coupons = res.data.normalCoupon;
                    _self.normalCoupon = res.data.normalCoupon;
                    _self.hiddenCoupon = res.data.hiddenCoupon;
                    _self.goodsPrice = res.data.goodsPrice;
                    _self.calculate();
                  _self.loading = false;
                  console.log(_self.normalCoupon)
                }).catch(res => {

                })
            },
            jump(url){
                toUrl(url)
            },
            calculate(){
                this.price = 0;
                if(this.couponIndex !== null && this.goodsPrice>0){
                    let coupon = this.coupons[this.couponIndex];
                    _self.couponPrice = coupon.minus;
                }
                if(_self.couponPrice>0){
                    this.price = cal.jian(_self.goodsPrice,_self.couponPrice)>0?cal.jian(_self.goodsPrice,_self.couponPrice):0;
                }else{
                    this.price = _self.goodsPrice;
                }

            },
            choseCoupon(){
                this.showCoupon = true;
            },
            cancelCoupon(){
                this.couponIndex = null;
                this.showCoupon = false;
                this.couponPrice = 0;
                this.calculate();
            },
            radioChange: function(index) {
                if(this.current==1){
                    return;
                }
                this.couponIndex = index;
                this.showCoupon = false;
                this.calculate();
            },
            changeTab(v){
                this.couponIndex = null;
                this.current = v.index;
                if(v.index === 1){
                    this.coupons = this.hiddenCoupon;
                }else{
                    this.coupons = this.normalCoupon;
                }
            },
            submit(){
                this.$refs.uForm.validate().then(res => {
                    let json = new Object();
                    json.goods = JSON.stringify(this.$Route.query);
                    json.price = _self.price;
                    json.couponPrice = _self.couponPrice;
                    json.goodsPrice = _self.goodsPrice;
                    json.form = _self.form;
                    if(_self.couponIndex !== null){
                        json.coupon_data_id =_self.coupons[_self.couponIndex].id;
                        json.coupon_id =_self.coupons[_self.couponIndex].coupon_id;
                    }else{
                        json.coupon_data_id = 0;
                        json.coupon_id = 0;
                    }
                    uni.$u.http.post('order/submit', json).then(res => {
                        _self.$Router.replace({
                            path: '/pages/pay/pay',
                            query: {
                                id:res.data.order_id,
                                type:'goods'
                            }
                        })
                    })
                })
            }

        }
	}
</script>

<style lang="scss">
    page{
        /*background-color: #FFFFFF!important;*/
       .create-content{
           width: 92%;
           margin: 0 auto;
           padding-bottom: 160rpx;
            .system_name{
                font-size: $font-lt;
            }
           .goods-list{
               .item{
                   .left{
                       image{
                           width: 150rpx;
                           height: 150rpx;
                       }
                   }
                   .right{
                       width: 73%;
                       height: 150rpx;
                       .title{
                           font-size: $font-base;
                       }
                       .money{
                           font-size: $font-base;
                            .money-left{
                                color: $-wash-price-color;
                            }
                       }
                   }
               }
           }
           .cell-list{
               padding: 20rpx 0;

               .cell-title{
                   font-size: $font-base;
               }
               .u-slot-value{
                   font-size: $font-base;
               }
               .total-coupon{
                   background-color: $-wash-price-color;
                   color: white;
                   border-radius: 30rpx;
                   font-size: $font-sm;
                   padding: 5rpx 15rpx;
               }
               .coupon-price{
                   font-size: $font-base;
                   color: $-wash-price-color;
               }
           }


       }
        .foot-fixed{
            position: fixed;
            border-bottom:1px solid #f9f9f9;
            font-size: $font-base;
            bottom: 0;
            .unit{
                color: $-wash-price-color;
            }
            .total-price{
                color: $-wash-price-color;
                font-size: $font-max;
            }
            .pay-btn{
                padding: 15rpx 40rpx;
                color: #FFFFFF;
                border-radius: 50rpx;
            }
        }
        .coupon-list{
            padding: 30rpx 0 0 0;
            .coupon-item{
                height: 870rpx;
                background-color: #F9F9F9;
                padding: 20rpx 30rpx 20rpx 30rpx;
                .item{
                    border-radius: 6px;
                    /*height: 300rpx;*/
                    background-color: #FFFFFF;

                    .top{
                        width: 25rpx;
                        height: 25rpx;
                        border-radius: 50%;
                        background-color: #f9f9f9;
                        position: absolute;
                        top: 168rpx;
                        left: -14rpx;
                    }
                    .bottom{
                        width: 25rpx;
                        height: 25rpx;
                        border-radius: 50%;
                        background-color: #f9f9f9;
                        position: absolute;
                        top: 168rpx;
                        right: -14rpx;
                    }
                    .item-content{
                        border-bottom: 1px dashed #f3f3f3;
                        .left{
                            width: 29%;
                            height: 180rpx;
                            color: $-wash-price-color;
                            .money{
                                font-size: 45rpx;
                            }
                            .enough{
                                font-size: $font-sm;
                            }
                            .tag{
                                position: absolute;
                                top:0;
                                left: 0;
                                padding: 5rpx 15rpx;
                                font-size: $font-sm;

                                background-image: linear-gradient(to right, #FF5904,rgba(255, 89, 4,.65));
                                color: #FFFFFF;
                                border-radius: 0 0 6px 0;
                            }
                        }
                        .right{
                            background-color: #FFFFFF;
                            height: 180rpx;
                            width: 70%;
                            padding: 20rpx 10rpx 20rpx 20rpx;
                            .info{
                                height: 100%;
                                width: 85%;
                                padding: 5rpx 10rpx;

                                .name{
                                    font-size: $font-lg;
                                }

                                .out{
                                    font-size: $font-base;
                                    color: #F24544;
                                }
                                .endtime{
                                    font-size: $font-base;
                                }
                            }
                            .btn{
                                width: 15%;
                                font-size: $font-base;
                                color: #F24544;
                            }
                        }
                    }
                    .desc{
                        font-size: $font-sm;
                        padding: 20rpx;
                    }
                }




            }
            .cancel-btn{
                padding: 20rpx 30rpx;
            }
        }
    }
</style>
